<template>
  <div>
    <el-card class="box-card">
      <el-form :inline="true" ref="memberFormData" :model="KeChengFormData" class="demo-form-inline" size="mini">
        <el-form-item label="课程名称:">
          <el-input v-model="KeChengFormData.title" placeholder=""></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="seachClass">查询</el-button>
          <el-button type="warning" icon="el-icon-refresh" size="mini" @click="resetClass">重置</el-button>
          <el-button type="success" icon="el-icon-search" size="mini" @click="xinz">新增</el-button>
        </el-form-item>
      </el-form>

      <el-divider></el-divider>

      <el-table
          :data="tableData"
          border
          style="width: 100%">
        <el-table-column
            type="index"
            label="序号"
            align="center"
            width="50">
        </el-table-column>
        <el-table-column
            prop="cover"
            label="课程封面"
            align="center"
        >
          <template slot-scope="scope">
            <img :src="scope.row.cover" width="200px" height="60px">
          </template>
        </el-table-column>
        <el-table-column
            prop="title"
            label="课程名称"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="subjectName"
            label="课程分类"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="price"
            label="价格"
            align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.price==0.00">免费</span>
            <span v-else> {{scope.row.price}}元</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="sxjia"
            label="上下架"
            align="center"
        >
          <template slot-scope="scope">
            <el-switch
                v-model="scope.row.status"
                :active-value="1"
                :inactive-value="0"
                active-color="#ff4949"
                inactive-color="#13ce66"
                active-text="下架"
                inactive-text="上架"
                @change="changesxjia(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
            prop="statu"
            label="状态"
            align="center"
        >
          <template slot-scope="scope">
            <el-switch
                v-model="scope.row.statu"
                :active-value="1"
                :inactive-value="0"
                active-color="#ff4949"
                inactive-color="#13ce66"
                active-text="禁用"
                inactive-text="正常"
                @change="changeSwitch(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
            prop="sort"
            label="排序"
            align="center"
        >
        </el-table-column>
        <el-table-column
            label="操作"
            align="center"
        >
          <template slot-scope="scope">
            <el-button
                size="mini"
                type="danger"
                @click="editClass(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </el-card>

<!--    弹出-->
    <el-dialog title="新增" :visible.sync="xinzeng" width="89%" @closed="closeAddDialog">
      <el-card class="box-card">
        <el-form :inline="true" ref="xinzengFormData" :model="xinzengFormData" class="demo-form-inline" size="mini">
          <el-form-item label="课程名称:">
            <el-input v-model="xinzengFormData.title" placeholder=""></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="xzseachClass">查询</el-button>
            <el-button type="warning" icon="el-icon-refresh" size="mini" @click="xzresetClass">重置</el-button>
          </el-form-item>
        </el-form>

        <el-divider></el-divider>

        <el-table
            :data="xztableData"
            border
            style="width: 100%">
          <el-table-column
              type="index"
              label="序号"
              align="center"
              width="50">
          </el-table-column>
          <el-table-column
              prop="title"
              label="课程名称"
              align="center"
          >
          </el-table-column>
          <el-table-column
              prop="subjectName"
              label="课程分类"
              align="center"
          >
          </el-table-column>
          <el-table-column
              prop="price"
              label="价格"
              align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.price==0.00">免费</span>
              <span v-else="scope.row.price!=0.00">价格: {{scope.row.price}}元</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="sxjia"
              label="上下架"
              align="center"
          >
            <template slot-scope="scope">
              <el-switch
                  v-model="scope.row.status"
                  :active-value="1"
                  :inactive-value="0"
                  active-color="#ff4949"
                  inactive-color="#13ce66"
                  active-text="下架"
                  inactive-text="上架"
                  @change="changesxjia(scope.row)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column
              prop="statu"
              label="状态"
              align="center"
          >
            <template slot-scope="scope">
              <el-switch
                  v-model="scope.row.statu"
                  :active-value="1"
                  :inactive-value="0"
                  active-color="#ff4949"
                  inactive-color="#13ce66"
                  active-text="禁用"
                  inactive-text="正常"
                  @change="changeSwitch(scope.row)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column
              prop="sort"
              label="排序"
              align="center"
          >
          </el-table-column>
          <el-table-column
              label="操作"
              align="center"
          >
            <template slot-scope="scope">
              <el-button v-if="edits(scope.row)"
                  size="mini"
                  type="info"
                         disabled
                  >已添加</el-button>
              <el-button v-else
                         size="mini"
                         type="danger"
                         @click="edit(scope.row)">添加</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <el-pagination
            @size-change="xzhandleSizeChange"
            @current-change="xzhandleCurrentChange"
            :current-page="xzcurrentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="xzpageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="xztotal">
        </el-pagination>
      </el-card>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "precou",
  data(){
    return{

      description:"",
      editClassFormData:{},
      editDialogVisible:false,
      KeChengFormData:{},
      tableData: [],
      currentPage: 1,
      pageSize:5,
      //总条数
      total:0,
      //ids，pid 坡用勿删
      ids:null,
      pid:null,

      //新增对象
      xinzeng:false,
      xinzengFormData:{},

      //弹出框分页参数
      xzcurrentPage:1,
      xzpageSize:5,
      xztotal:0,
      xztableData:[],
    }
  },
  created(){
    var ceshi=this.$route.params.key;
    // console.log("数据"+JSON.stringify(ceshi))
    if(ceshi.cid!=null ){
      // console.log("cid====="+ceshi.cid)
    this.ids=ceshi.cid;
    this.pid=ceshi.pid;
    } else {
      // console.log("pid====="+ceshi.pid)
      this.ids=[0]
      this.pid=ceshi.pid;
    }
    this.ids.indexOf()
    this.init();
  },
  methods:{
    handleChange(val){},
    closeAddDialog(){
      this.init();
    },
    queren(){

      var that=this;
      this.$http.post(`core/course/updateCourseAndDescription/${this.description}`,this.editClassFormData).then(function (resp) {
        that.editDialogVisible=false;
      })
    },
    quxiao(){
      this.editDialogVisible=false;
      this.editClassFormData={};
    },
    changesxjia(row){
      var that=this;
      this.$http.post(`core/course/changesxjia`,row).then(function (resp) {

      })
    },
    changeSwitch(row){
      var that=this;
      this.$http.post(`core/course/changeStatu`,row).then(function (resp) {

      })
    },
    handleSizeChange(val) {
      this.pageSize=val;
      this.init();
    },
    handleCurrentChange(val) {
      this.currentPage=val;
      this.init();
    },
    xzhandleCurrentChange(val){
      this.xzcurrentPage=val;
      this.xzinit();
    },
    xzhandleSizeChange(val) {
      this.xzpageSize=val;
      this.xzinit();
    },
    //删除
    editClass(row){
      var that = this;
      this.$http.get("/home/precinct/deletePreCouByPreID?pid="+this.pid+"&cid="+row.id).then(function (resp){
        if(resp.data.code==200){
          var indexOf = that.ids.indexOf(parseInt(row.id));
          that.ids.splice(indexOf,1)
          that.xinzeng=false;
          that.init();
        }
      })
    },
    //弹出修改
    edit(item){
    var that = this;
    this.$http.get("/home/precinct/insertPreCouByPreID?pid="+this.pid+"&cid="+item.id).then(function (resp){
    if(resp.data.code==200){
      that.ids.push(parseInt(item.id))
      that.xinzeng=false;
      that.xzinit();
    }
    })
    },
    edits(item){
      if(this.ids.indexOf(parseInt(item.id))>-1){
        return true;
      }else {
        return  false;
      }
    },
    seachClass(){
      this.init();
    },
    xinz(){
      this.xinzeng=true;
      this.xzinit();
    },
    //掏出框的搜索
    xzseachClass(){
      this.xzinit();
    },
    //弹出框的取消
    xzresetClass(){
      this.xinzeng=false;
      this.xinzengFormData={},
      this.$refs.xinzengFormData.resetFields();
    },
    resetClass(){
      this.KeChengFormData={};

    },
    //弹出初始化
    xzinit(){
      var that=this;
      this.$http.post(`core/course/findCourses/${this.currentPage}/${this.pageSize}`,this.xinzengFormData).then(function (resp) {
        that.xztableData=resp.data.result.records;
        that.xztotal=resp.data.result.total;
      })
    },
    init(){
      this.KeChengFormData.ids=this.ids;
      var that=this;
      this.$http.post(`core/course/findCourses/${this.currentPage}/${this.pageSize}`,this.KeChengFormData).then(function (resp) {
        that.tableData=resp.data.result.records;
        that.total=resp.data.result.total;
      })
    },
  }


}
</script>

<style scoped>

</style>